<template>
  <div class="article-category">
    <div class="container">
      <div class="common" @click="toMakedown">
        <el-icon class="icon"><Grid /></el-icon>
        学术云文档库
      </div>
      <el-divider style="margin: 0px" />
      <ul @click="changeInfo">
        <li :class="[active == 0 ? 'active' : '']" v-bind:data-idx="0">
          <el-icon class="icon"><SwitchFilled /></el-icon>
          综合
        </li>
        <li
          v-for="category in cateforyData"
          :key="category.id"
          v-bind:data-idx="category.id"
          :class="[active == category.id ? 'active' : '']"
        >
          <el-icon class="icon">
            <component :is="category.icon"></component>
          </el-icon>
          {{ category.name }}
        </li>
      </ul>
    </div>
    <div class="send" @click="toSend">
      <el-icon class="icon"><Promotion /></el-icon>
      文章发布
    </div>
  </div>
</template>

<script setup>
import { reqQueryCategory } from "@/api/article";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";

// 父组件传过来的方法，用于切换分类文章
const props = defineProps(["getCategoryId", "close"]);

const userStore = useUserStore();

const $router = useRouter();

// 分类数据
const cateforyData = ref([]);

// 分类菜单栏的高亮位置
const active = ref(0);

onMounted(() => {
  getCategory();
});

// 获取分类信息
const getCategory = () => {
  reqQueryCategory().then((res) => {
    if (res.code == 200) {
      cateforyData.value = res.data;
    }
  });
};

// 根据分类获取文章
const changeInfo = (e) => {
  active.value = e.target.dataset.idx;
  // 将分类id传给父组件
  props.getCategoryId(active.value);
};

// 发布文章
const toSend = () => {
  if (userStore.userName) {
    $router.push("/upload-article");
  } else {
    // 用户未登录
    ElMessage.info("请先登录账号");
    props.close(true);
  }
};

const toMakedown = () => {
  window.open("http://8.134.121.53:5001/");
};
</script>

<style scoped lang="scss">
.article-category {
  width: 100%;

  .container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #515767;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .common {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;

      .icon {
        margin: 0 15px 0 10px;
        color: #8a919f;
      }
    }
    .common:hover {
      color: #1e80ff;
      background-color: #d7d7d734;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s;
      .icon {
        color: #1e80ff;
      }
    }
    ul {
      width: 100%;

      li {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        .icon {
          margin: 0 15px 0 10px;
          color: #8a919f;
        }
      }
      li.active {
        background-color: #1e80ff21 !important;
        color: #1e80ff;
        .icon {
          color: #1e80ff;
        }
      }
      li:hover {
        color: #1e80ff;
        background-color: #d7d7d734;
        .icon {
          color: #1e80ff;
        }
      }
    }
  }
  .send {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    color: #1e80ff;
    transition: all 0.5s;
    .icon {
      margin: 0 5px;
    }
  }
  .send:hover {
    background-color: #ededed;
  }
}
</style>